<template>
    <div class="home">
        <!-- <div class="title1">
            <div class="logo"></div>
            <div class="title1-text">海陵区殡仪馆微信公众号</div>
        </div> -->
        <!-- <div class="title2">政府搭台 · 公正透明 · 便捷高效 · 服务民生</div> -->
        <!-- <div class="title2">预约服务</div> -->
        <main>
            <div class="box" @click="tips('/cremationAppointment')">
                <div class="box-19"></div>
                <div>殡仪馆火化预约</div>
            </div>
            <div class="box">
                <div class="box-17"></div>
                <div>殡仪馆守灵预约</div>
            </div>
        </main>
        <div class="footer">
            <div>版权所有：海陵区殡仪馆</div>
        </div>
        <van-popup 
            v-model:show="show2" 
            round 
            :style="{ height: '70%', width: '90%' }"
        >
            <div class="popup-title">预约须知</div>
            <div class="popup-content">
                <div>为满足人民群众对殡仪服务需求，优化殡葬服务机构现场秩序，引导市民群众规范有序地办理逝者“身后事”，海陵区殡仪馆在线预约平台自2023年5月1日起正式开放预约，现将有关事项通告如下：</div>
                <div>1、自2023年5月1日上午8时起，市民群众可通过“海陵区殡仪馆”微信公众号平台预约3天内的告别服务，预约告别厅，需提前一天预约。凭预约记录办理相关服务。</div>
                <div>2、仅受理在馆告别预约，遗体暂未到馆的请先致电（84503467）预约遗体接运业务。</div>
                <div>3、预约提交时，请认真仔细核对，确保信息正确； 预约成功后（需要通过审核），可于微信公众号自主查询已预约时间，请勿再重复预约，预约成功后需要提前一天到殡仪馆办理业务。</div>
                <div>4、请市民群众合理安排好时间，务必携带好《居民死亡殡葬证》以及逝者身份证、经办人身份证，按照预约的时间提前1天到馆办理相关业务，如有公安部门经办，还需提供公安部门出具的《尸体处理通知书》《死亡证明》等材料，错过预约时间，系统将自动取消您的网上预约。</div>
                <div>5、网上预约采用实名制，请在详细阅读预约须知同意后，进入预约信息填写页面进行预约，预约人需保证填写信息的真实性和有效性，否则由此造成的一切后果及责任由预约人承担。根据相关法律法规和政策，请您填写真实的身份信息，若您填写的信息不完整或不准确，则可能无法进行网上预约，为了向你提供服务，需要在法律允许的范围内在后台显示您的预约信息，本程序需您同意《用户服务协议》及《隐私政策》。本程序收集用户手机号码仅用于接收预约成功短信，请务必正确填写。</div>
                <div>6、预约失败或其他任何问题，请致电（84503467）咨询。</div>
                <van-button type="primary" style="margin-top: 4vw;" block :disabled="disabled" @click="$router.push(tipsRouter)">{{ btnText }}</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script lang="ts" setup >
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, readonly } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute } from 'vue-router'
    import { useWeixinLogin } from '@/hooks'
    const route = useRoute()
    // 微信授权并且跳转到对应页面
    // useWeixinLogin(route.query.redirect)

    const show2: Ref<boolean> = ref(false)
    const disabled: Ref<boolean> = ref(true)
    const timing: Ref<number> = ref(5)
    const btnText: Ref<string> = ref('5s')
    const tipsRouter: Ref<string> = ref('')
    const interval = ref()

    const tips = (val) => {
        tipsRouter.value = val
        show2.value = true
        clearInterval(interval.value)
        disabled.value = true
        timing.value = 5
        btnText.value = '5s'
        interval.value = setInterval(() => {
            if (timing.value > 1) {
                timing.value--
                btnText.value = timing.value + 's'
            } else if (timing.value <= 1) {
                disabled.value = false
                btnText.value = '同意'
            } else {
                clearInterval(interval.value)
            }
        }, 1000);
    }
</script>
<style lang="scss" scoped>
    .home {
        @include padding-global;
        width: 100vw;
        height: 100vh;
        // padding: 6px 15px;
        box-sizing: border-box;
        // background-image: linear-gradient(#9ab4fd, #ffffff);
        background-image: url('@/assets/bg/bg10.png');
        // background-position: 40% 0;
        // background-size: cover;
        background-size: 100% 100%;
        overflow: scroll;
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    .title1 {
        width: 350px;
        margin: 0 auto;
        // padding-top: 20px;
        padding-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .logo {
        width: 40px;
        height: 40px;
        background: url("@/assets/logo.png");
        background-size: 100% 100%;
    }
    .title1-text {
        padding-left: 10px;
        font-size: 19px;
        font-weight: bold;
        // color: #fff;
        color: rgba(1, 28, 117, 1);
        // text-shadow: 0 0 10px #484848;
    }
    .title2 {
        padding-top: 20px;
        font-size: 16px;
        font-weight: 600;
        // color: #fff;
        color: rgba(1, 28, 117, 1);
        // text-shadow: 0 0 5px #484848;
    }
    main {
        flex: 1;
        margin: 0 auto;
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // align-content: space-around;
        flex-wrap: wrap;
        // align-content: start;
        width: 300px;
        // height: 200px;
        .box {
            width: 300px;
            // width: 90px;
            // height: 90px;
            height: 60px;
            display: flex;
            // flex-direction: column;
            // justify-content: space-around;
            align-items: center;
            color: #105661;
            // font-weight: bold;
            font-size: 20px;
            border-radius: 20px;
            margin: 0 0 10px 0px;
            box-sizing: border-box;
            padding-left: 20px;
            box-shadow: 0px 0px 15px #9337d146 inset;
            background: linear-gradient(180deg, #ffffff6b 0%, #34898d 100%);
            box-shadow: 4px 4px 15px -1px #21898fa1;
            // .box-text {
            //     width: 150px;
            //     text-align: left;
            // }
        }
        // .box:not(:nth-child(3n)) {
        //     margin-right: 15px;
        // }
        .box-17{
            width: 60px;
            height: 60px;
            background: url('@/assets/home/box-17.png');
            background-size: 100% 100%;
            margin-top: 15px;
            margin-right: 20px;
        }
        .box-19{
            width: 40px;
            height: 40px;
            background: url('@/assets/home/box-19.png');
            background-size: 100% 100%;
            margin-top: 5px;
            margin-left: 10px;
            margin-right: 30px;
        }
    }
    .footer {
        color: #fff;
        font-size: 13px;
        padding-top: 50px;
    }
    :deep(.van-popup) {
        display: flex;
        flex-direction: column;
        background: url('@/assets/bg/bg11.png');
        background-size: 100% 100%;
    }
    .popup-title {
        color: $font-color-global;
        font-size: 18px;
        font-weight: bold;
        padding-top: 10px
    }
    .popup-content {
        @include padding-global;
        // padding-top: 20px;
        text-indent: 30px;
        text-align: left;
        font-size: 16px;
        padding-bottom: 30px;
        flex: 1;
        overflow: scroll;
    }
</style>